<template>
    <div class="container">
        <div class="head-bar">
            <img v-if="fileSpace && successFlag === '1'" :src="fileSpace + '/images/w-res-success-3.png'"
              alt="" class="width-375 height-133">
            <img v-if="fileSpace && successFlag === '0'" :src="fileSpace + '/images/w-res-fail-3.png'"
              alt="" class="width-375 height-133">
            <img v-if="fileSpace && successFlag === '1'" :src="fileSpace + '/images/w-icon-success-2.png'"
                  alt="" class="width-182 height-182 res-icon">
            <img v-if="fileSpace && successFlag === '0'" :src="fileSpace + '/images/w-icon-fail.png'"
                  alt="" class="width-182 height-182 res-icon">
            <div class="tips-box">
              <div class="font-30 font-white">{{ msg }}</div>
            </div>
            <div class="height-85"></div>
            <div class="text-align-l res-content width-235">
              <div class="mar-b-18 text-align-c">
                <span class="font-18">￥</span>
                <label class="font-29">{{ price }}</label>
              </div>
              <div class="mar-b-10 font-13 font-color-9 flex">
                <span>下单时间：</span>
                <span class="font-color flex-item">{{ orderData.createTime }}</span>
              </div>
              <div class="mar-b-10 font-13 font-color-9" v-if="successFlag === '1' && orderData.payTime">
                <span>支付时间：</span>
                <span class="font-color flex-item">{{ orderData.payTime }}</span>
              </div>
            </div>
        </div>
        <div class="height-16"></div>
        <!-- 订单商品类型： 10：微店商品快递配送 11： 微店商品门店自提 20: 分销商品快递配送 30:微店商品+分销商品快递配送 -->
        <div class="pad-l-20 pad-r-20 mar-l-20 mar-r-20">
          <div class="button-box" v-if="successFlag === '1'">            
            <button v-if="getShowBuyCard" class="details font-16 mar-b-16" @click="orderDetail">订单详情</button>
            <button class="home font-16" @click="$pt.reLaunch({url: '/pages/home/main'})">返回首页</button>
          </div>
          <div class="button-box mar-t-28" v-else>
            <button class="home font-16" @click="$pt.reLaunch({url: '/pages/home/main'})">返回首页</button>    
          </div>
        </div>
    </div>
</template>
<script>
import { getProjectOrder } from '@/api/distribution'
export default {
  data() {
    return {
      iconClass: '',
      successFlag: '',
      price: '',
      msg: '',
      type: '',
      orderId: '',
      orderData: {}
    }
  },
  onShow() {
    this.successFlag = this.getCurrentPage().query.successFlag
    this.price = this.getCurrentPage().query.price
    this.type = this.getCurrentPage().query.resType
    this.orderId = this.getCurrentPage().query.orderId
    if (this.successFlag === '1') {
      this.$pt.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#fe6628'
      })
      this.msg = '支付成功'
    } else {
      this.$pt.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#8b8b8b'
      })
      this.msg = '支付失败'
    }
    this.orderInfo()
  },
  methods: {
    orderDetail() {
      this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + this.orderId })
    },
    orderInfo() {
      this.orderData = {}
      getProjectOrder(this.orderId).then((response) => {
        if (response.isError) return
        this.orderData = response.data
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
@color-green: #20b675;
.res-icon{
  position: absolute;
  left: 50%;
  top: 35px;
  width: 182px;
  height: 182px;
  margin: 0 0 0 -91px;
  z-index: 10;
}
.res-content{
  margin: 0 auto;
  line-height: 1.7;
}
.head-bar{
  position: relative;
  .tips-box{
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    text-align: center;
    z-index: 11;
  }
}
.button-box{
  button{
    width: 100%;
    height: 44px;
    color: #fff;
    background: linear-gradient(to right, #ff8e4b, #ff4e25);
    line-height: 44px;
    text-align: center;
    border-radius: 20em;
    &::after{
      border: unset;
    }
  }
  .home{
    color: #FE763B;
    border: #ff7d3d 1px solid;
    background: #fff;
  }
}
</style>
